<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 引入样式 -->
<link
	href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script
	src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>
	<div class="container">
		<!--
        	作者：offline
        	时间：2019-03-01
        	描述：标题
        -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>

		</div>
		<!--
        	作者：offline
        	时间：2019-03-01
        	描述：
        -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-info">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table">
					<tr>
						<th>#</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${pageInfo.list }" var="emplovee">
						<tr>
							<th>${emplovee.empId }</th>
							<th>${emplovee.empName }</th>
							<th>${emplovee.gender == "M" ?"男":"女" }</th>
							<th>${emplovee.email }</th>
							<th>${emplovee.dId }</th>
							<th>${emplovee.department.deptName }</th>

							<th>
								<button class="btn btn-info btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
								</button>
								<button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-remove-sign"
										aria-hidden="true"></span> 删除
								</button>
							</th>
						</tr>
					</c:forEach>

				</table>
			</div>

		</div>
		<div class="row">
			<div class="col-md-6">当前信息</div>
			<div class="col-md-6">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<c:if test="${pageInfo.pageNum!=1 }">
							<li><a href="${pageContext.request.contextPath }/emps">首页</a></li>
						</c:if>
						<c:if test="${pageInfo.pageNum==1 }">
							<li class="disabled"><a href="javascript:void(0);">首页</a></li>
						</c:if>
						<c:if test="${pageInfo.pageNum==1 }">
							<li class="disabled"><a href="" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
							</a></li>
						</c:if>

						<c:if test="${pageInfo.pageNum!=1 }">
							<li><a href="${pageContext.request.contextPath }/emps?pn=${pageInfo.prePage}" aria-label="Previous"><span
									aria-hidden="true">&laquo;</span>
							</a></li>
						</c:if>


						<c:forEach items="${pageInfo.navigatepageNums }" var="Nums">
							<c:if test="${pageInfo.pageNum!=Nums }">
								<li><a
									href="${pageContext.request.contextPath }/emps?pn=${Nums}">${Nums }</a></li>
							</c:if>
							<c:if test="${pageInfo.pageNum==Nums }">
								<li class="active"><a href="javascript:void(0);">${Nums }</a></li>
							</c:if>

						</c:forEach>
						 
						
						<c:if test="${pageInfo.pageNum!=pageInfo.pages }">
						
							<li ><a href="${pageContext.request.contextPath }/emps?pn=${pageInfo.nextPage}" aria-label="Next"> <span
								aria-hidden="true">&raquo;</span>
							</a></li>
						</c:if>
						<c:if test="${pageInfo.pageNum==pageInfo.pages }">
						
							<li class="disabled"><a href="javascript:void(0);" aria-label="Next"> <span
								aria-hidden="true">&raquo;</span>
							</a></li>
						</c:if>
						<c:if test="${pageInfo.pageNum==pageInfo.pages }">
							<li class="disabled"><a href="#">尾页</a></li>  
						</c:if>
						<c:if test="${pageInfo.pageNum!=pageInfo.pages }">
							<li><a href="${pageContext.request.contextPath }/emps?pn=${pageInfo.pages}">尾页</a></li>
						</c:if>

					</ul>
				</nav>
			</div>
		</div>
	</div>
</body>

</html>